import createG2 from 'g2-react';
import { Stat } from 'g2';
import G2 from 'g2';     //G2要引入，坑死了，大爷的
import React from 'react';
import ReactDOM from 'react-dom';
import ajax from '../../../../utils/ajax';
import Logger from '../../../../utils/Logger';

const logger = Logger.getLogger('TestBarChart');

const Chart = createG2(chart => {
      const Stat = G2.Stat;
      const colorMap = {
        'totalCount': '#7EC856',
        'validCount': '#38B8F2'
      }

      chart.axis('count', {//设置x轴别名离轴的距离
        titleOffset: 55,
      });
      chart.col('count', {//设置纵坐标之间的间隔
         tickInterval: 30,
         alias:'预约人数',
      });

      chart.axis('simpleDayStr', {//设置y轴别名离轴的距离
          titleOffset: 55
      });
      chart.col('simpleDayStr', {//为y轴设置别名
          alias:'时间',
      });

      chart.legend(false);//关闭图例


      chart.interval(['dodge', 'stack']).position('simpleDayStr*count').color('type*number', function(type, number) {
        return colorMap[number];
      }).size(10);

      chart.render();
});


/**
 * 分组层叠柱状图组件
 */
class TestBarChart extends React.Component {

  constructor(props) {
    super(props);
    this.state={
    width: 300,
    height: 350,
    plotCfg: {
        margin: [50, 100,90, 120],
    },
    forceFit: true,
    }
  }

  // 在react router中切换时, 组件不会重新mount, 只有props会变化
  componentWillReceiveProps = (nextProps) => {
    this.setState({
          frameData: nextProps.frameData > this.props.frameData
    });
  } 

  componentWillUnmount=()=>{
      //this.chart.destroy();
  }

 render() {
    return (
         <Chart 
            data={this.props.frameData}
            width={this.state.width}
            height={this.state.height}
            plotCfg={this.state.plotCfg}
            forceFit={this.state.forceFit}
         />
    );
  }
}

export default TestBarChart;